<script lang="ts" setup>
import { ref, Ref, reactive } from "vue";
import appMenuServiceApi from "@/api/modules/org/bean/app-menu";
import { ExportFunctionServiceApi } from "@/api/modules/low-code/bean/config";
import { SYSTEM_CONFIG } from "@/config/system";
import LowcodeSelectDialog from "./lowcode-select-dialog.vue";
import { AxiosResponse } from "axios";
import { messageWarningTip } from "@/utils/message-config";
import { JxtechModelFormCallback } from "@whjxtech/jxtech-component";

//定义事件
const emit = defineEmits<{
  (e: "save-success", data: any, res: any): void; //新增保存 修改保存 成功回调
}>();
const props = defineProps({
  /**菜单id */
  menuId: String,
  /**父菜单id */
  parentMenuId: String
});

const AppMenuFormData: Ref<any> = ref({
  menuId: props.menuId,
  parentMenuId: props.parentMenuId
});

const JxtechModelFormRef = ref();

const AppMenuFormState = reactive({
  InterphaseSelectVisible: false,
  primaryKey: "menuId",
  rules: {
    menuCode: [{ required: true, message: "请输入菜单编码", trigger: "blur" }],
    menuName: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
    orderNum: [{ type: "number", message: "排序必须是数字", trigger: "blur" }]
  },
  newBeanFunction: () => {
    return appMenuServiceApi.add({
      parentMenuId: props.parentMenuId + "," + SYSTEM_CONFIG.APP_ID
    });
  },
  //新增保存 修改保存 成功后触发
  onSaveSuccess: (data: any, res: any) => {
    emit("save-success", data, res);
  },
  modelFormCallback: {
    afterNewBean: (formdata: any) => {
      AppMenuFormData.value.vuePathName = null;
    },
    afterId: (formdata: any) => {
      var regPos = /^[0-9]+.?[0-9]*/;
      if (regPos.test(formdata.vuePath)) {
        ExportFunctionServiceApi.queryById(formdata.vuePath)
          .then((Response: AxiosResponse<any>) => {
            AppMenuFormData.value.vuePathName = Response.data.functionName;
          })
          .catch((Accident: AxiosResponse<any>) => {})
          .finally(() => {});
      } else {
        AppMenuFormData.value.vuePathName = null;
      }
    },
    preSave: (data: any) => {
      console.log(data);
      // data.vuePath = data.menuUrl;
    }
  } as JxtechModelFormCallback,
  InterphaseSelectOkMany: (dataList: any[], pkList: string[]) => {
    if (!/^[0-9]+.?[0-9]*/.test(dataList[0].functionId)) return messageWarningTip("functionId不是数字");
    AppMenuFormData.value.vuePath = dataList[0].functionId;
    AppMenuFormData.value.vuePathName = dataList[0].functionName;
    AppMenuFormData.value.menuUrl = "/low-code/release/index";
  }
});

//对外提供方法
defineExpose({
  save: () => JxtechModelFormRef.value.save()
});
</script>
<template>
  <jxtech-model-form
    ref="JxtechModelFormRef"
    :service-api="appMenuServiceApi"
    :primary-key="AppMenuFormState.primaryKey"
    :form-data="AppMenuFormData"
    :rules="AppMenuFormState.rules"
    :new-bean-function="AppMenuFormState.newBeanFunction"
    :callback="AppMenuFormState.modelFormCallback"
    @save-success="AppMenuFormState.onSaveSuccess"
  >
    <el-row>
      <el-col :span="21" :offset="1">
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="菜单编码" prop="menuCode">
              <el-input placeholder="请输入菜单编码" v-model="AppMenuFormData.menuCode"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="菜单名称" prop="menuName">
              <el-input placeholder="请输入菜单名称" v-model="AppMenuFormData.menuName"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="父级菜单" prop="parentMenuName">
              <el-input disabled v-model="AppMenuFormData.parentMenuName"></el-input>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="排序" prop="orderNum">
              <el-input placeholder="请输入排序" v-model.number="AppMenuFormData.orderNum"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="是否按钮" prop="pagePoint">
              <el-radio-group v-model="AppMenuFormData.pagePoint">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </jxtech-model-form-item>
          </el-col>
          <el-col :span="12">
            <jxtech-model-form-item label="是否叶子" prop="menuChief">
              <el-radio-group v-model="AppMenuFormData.menuChief">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <jxtech-model-form-item label="图标" prop="menuImageUrl">
              <el-input v-model="AppMenuFormData.menuImageUrl" placeholder="请输入图标"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="24" v-show="!/^[0-9]+.?[0-9]*/.test(AppMenuFormData.vuePath)">
          <el-col :span="24">
            <jxtech-model-form-item label="菜单路由" prop="menuUrl">
              <el-input v-model="AppMenuFormData.menuUrl" placeholder="请输入菜单路由"></el-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <jxtech-model-form-item label="关联在线表单" prop="vuePath">
              <jxtech-select-input
                v-model:inputValue="AppMenuFormData.vuePath"
                v-model:inputLabel="AppMenuFormData.vuePathName"
                placeholder="请选择关联在线表单"
                @select-click="AppMenuFormState.InterphaseSelectVisible = true"
                @clear-click="
                  AppMenuFormData.vuePath = null;
                  AppMenuFormData.vuePathName = null;
                  AppMenuFormData.menuUrl = null;
                "
              ></jxtech-select-input>
            </jxtech-model-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </jxtech-model-form>

  <lowcode-select-dialog
    v-model:visible="AppMenuFormState.InterphaseSelectVisible"
    @ok-many="AppMenuFormState.InterphaseSelectOkMany"
  ></lowcode-select-dialog>
</template>
